<script setup lang="ts">
import HomeContent from '@/components/HomeContent/index.vue'
import { reactive, ref } from 'vue'
import { getRoomInfoAPI } from '@/services/room/room'
import type { FormInstance, FormRules } from 'element-plus'
import { useRouter } from 'vue-router'
import { GetRoomsResponseData, RoomInfo } from '@/services/room/type'
const $router = useRouter()
// 表单元素
const formRef = ref<FormInstance>()

// 表单数据类型
interface fromType {
  meetingNumber: string
}
// 表单收集数据
const form = reactive<fromType>({
  meetingNumber: ''
})

// 表单校验规则
const rules = reactive<FormRules<fromType>>({
  meetingNumber: [{ required: true, message: '请输入会议号', trigger: 'blur' }]
})

// 表单提交事件
const confim = async () => {
  await formRef.value?.validate()
  await isConnection()
}

const roomInfo = ref<RoomInfo>()

const getRoomInfoData = async () => {
  const res: GetRoomsResponseData = await getRoomInfoAPI(form.meetingNumber)
  roomInfo.value = res.data.roomInfo[0]
}

const dialogVisible = ref<boolean>(false)

const passInput = ref('')

// 加入房间前所要做的判断
const isConnection = async () => {
  // 获取房间信息
  await getRoomInfoData()
  // 判断房间是否有人
  // if (roomInfo.value?.currentParticipants === 0) {
  //   ElMessage({
  //     type: 'warning',
  //     message: '房间不存在'
  //   })
  //   throw new Error('房间不存在')
  // }
  // // 判断房间内用户的人数是否达到上限
  // if (roomInfo.value?.currentParticipants === roomInfo.value?.capacity) {
  //   ElMessage({
  //     type: 'warning',
  //     message: '房间人数已满'
  //   })
  //   throw new Error('房间人数已满')
  // }
  // 入密码（有密码时经过这一步）
  if (roomInfo.value?.password) {
    dialogVisible.value = true
    await confimPas()
  }
  $router.push({
    path: `/meeting/${form.meetingNumber}`,
    query: {
      flag: '1'
    }
  })
}

const confimPas = () => {
  if (passInput.value === '') {
    ElMessage({
      type: 'warning',
      message: '请输入会议密码'
    })
    return Promise.reject('请输入会议密码')
  }
  if (roomInfo.value?.password !== passInput.value) {
    ElMessage({
      type: 'warning',
      message: '密码错误'
    })
    return Promise.reject('密码错误')
  }
  dialogVisible.value = false
  $router.push({
    path: `/meeting/${form.meetingNumber}`,
    query: {
      flag: '1'
    }
  })
  return Promise.resolve()
}
</script>
<template>
  <el-dialog
    v-model="dialogVisible"
    title="请输入密码"
    width="30%"
    destroy-on-close
    center
    style="text-align: center !important"
  >
    <div style="width: 100%; text-align: center">
      <input type="text" v-model="passInput" />
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confimPas()"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
  <HomeContent>
    <template #title> 加入会议 </template>
    <template #content>
      <p>请输入会议号</p>
      <el-form :model="form" :rules="rules" ref="formRef" class="form">
        <el-form-item prop="meetingNumber">
          <el-input v-model="form.meetingNumber" class="meetingNumberInp" />
        </el-form-item>
        <el-form-item>
          <el-button @click="confim" class="formBtn">加入</el-button>
        </el-form-item>
      </el-form>
    </template>
  </HomeContent>
</template>

<style scoped lang="less">
:deep(.el-dialog__body) {
  text-align: center;
}
.form {
  margin: 20px 0;
}
.meetingNumberInp {
  width: 300px;
  height: 40px;
}
.formBtn {
  width: 100px;
  background-color: #006eff;
  color: #fff;
}
:deep(.el-form-item__content) {
  justify-content: center;
}
</style>
